<template >
  <div>
     <el-button style="margin: 20px;" type="primary" @click="dirFlag=true">添加目录</el-button>
     <el-table @row-click="toSendDirId" :highlight-current-row="true" :data="dirList" border>
         <el-table-column label="目录名称" prop="CDName"></el-table-column>
         <el-table-column label="课件数" prop="CourseNumber"></el-table-column>
         <el-table-column label="操作">
          <template #default="{row}">
            <div>
              <el-link type="success" @click="toEdit(row)">编辑</el-link>
              <el-link type="danger" @click="toDel(row._id)">删除</el-link>
            </div>
          </template>
           
         </el-table-column>
     </el-table>
     <el-dialog :title="diaTitle" width="50%" :visible.sync="dirFlag">
      <el-form>
        <el-form-item lable="目录名称">
          <el-input v-model="CDName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
           <el-button type="primary" @click="toAddDir">确定</el-button>
            <el-button type="danger" @click="dirFlag=false">取消</el-button>
        </div>
      </template>
     </el-dialog>
  </div>
</template>
<script>
import {addCourseDirApi,delDirApi,updateDirApi} from '@/api/course'
export default {
  data(){
    return {
      diaTitle:"添加目录",
      dirFlag:false, //目录弹窗
      CDName:"",//目录名称
      dirid:"",//正在编辑的目录id
      dirList:[] //目录列表
    }
    
  },
  created(){
    // 使用eventBus 接受兄弟组件传来的目录列表数据、
    this.$bus.$on("sendDir",(list)=>{
      this.dirList=list//接受传值 并赋值
    })
  },
  methods:{
    toSendDirId(row){ //表格的row-click事件
      // 把目录id传给兄弟组件
      this.$bus.$emit("sendDirId",row._id)
    },
    toEdit(row){ //编辑回显
        this.dirFlag=true;
        this.CDName=row.CDName; //回显目录名称
        this.diaTitle="编辑目录"
        this.dirid=row._id//正在编辑的目录id
    },
     toDel(_id){
      // 删除目录接口
        delDirApi({
          CDid:this.$route.query._id,//课程_id
          _id:_id //目录_id
        }).then(res=>{
           console.log(res,"删除目录接口")
        })
    },
    async toAddDir(){
      // 添加目录接口
      if(this.CDName!=''){
        if(this.dirid){ //修改接口
            let editRes=await updateDirApi({
                CDName:this.CDName,//目录名称
                CDid:this.$route.query.ID, //课程ID
                _id:this.$route.query._id,//课程_id
                dirid:this.dirid //目录_id
            })
            console.log(editRes,"编辑目录")

        }else{ //添加接口
           let res=await addCourseDirApi({
              CDName:this.CDName,//目录名称
              CDid:this.$route.query.ID, //课程ID
              _id:this.$route.query._id //课程_id
            })
          
              this.dirList=res.data.list;
              console.log(res,"添加目录接口----")
           
             
        }
       
  
        this.dirFlag=false;
        this.CDName=""//清空添加输入框
        this.diaTitle="添加目录"
        this.dirid=""//清空正在编辑的目录id
      }
        
    }
  }
  
}
</script>
<style lang="scss" scoped>
  ::v-deep  .current-row td{
    background-color: skyblue !important;
    color: #fff !important;
  }
</style>